<template>
  <transition>
    <div class="dragIcon" :style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}" v-if="isShow">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'smart-fixed-ball',
  props: {
    itemWidth: {
      type: Number,
      default: 40
    },
    itemHeight: {
      type: Number,
      default: 40
    },
    hideWhenBodyScroll: {
      type: Boolean,
      default: false
    },
    leftPos: {
      type: Number,
      default: -1
    },
    rightPos: {
      type: Number,
      default: -1
    },
    topPos: {
      type: Number,
      default: -1
    },
    bottomPos: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      left: 0,
      top: 0,
      startToMove: false,
      isShow: true,
      timer: null,
      currentTop: null,
      clientW: document.documentElement.clientWidth, //视口宽
      clientH: document.documentElement.clientHeight //视口高
    }
  },
  created() {
    this.initPosition()
  },
  mounted() {},
  methods: {
    initPosition() {
      this.left =
        this.leftPos > -1
          ? this.leftPos
          : this.rightPos > -1
          ? this.clientW - this.itemWidth - this.rightPos
          : this.clientW - this.itemWidth - 30
      this.top =
        this.topPos > -1
          ? this.topPos
          : this.bottomPos > -1
          ? this.clientH - this.bottomPos - this.itemHeight
          : this.clientH / 2 - this.itemHeight / 2
    },
    doOtherThingsWhenScroll() {}
  }
}
</script>

<style scoped lang="less">
.dragIcon {
  position: fixed;
  border-radius: 50%;
}
</style>